<template>
  <div id="detail-container">
    <song-data
      :songData="songListTitle"
      :isTitle="true"/>
    <song-data
      v-for="(item, index) in songsData"
      :key="index"
      :songData="item"
      :index="index + 1"
      @cancelActive="cancelActive"
      ref="songDataRef"
      @dataLoad="dataLoad"/>
  </div>
</template>

<script>
import SongData from './SongData.vue'
import { debounce } from 'utils'

export default {
  name: 'SongList',
  data () {
    return {
      isNextPage: true,
      songsData: [],
      currentPage: 1,
      ids: [],
      isBindBusEvent: false,
      dataLoadDebounce: null,
      partIds: []
    }
  },
  props: {
    trackIds: {
      type: Array,
      default () {
        return []
      }
    },
    songListTitle: {
      types: Object,
      default () {
        return { operation: '操作', name: '音乐标题', singer: '歌手', album: '专辑', duration: '时长' }
      }
    }
  },
  components: {
    SongData
  },
  computed: {
    // 1. 判断是否最后一页
    isLastPage () {
      return this.currentPage * 100 >= this.trackIds.length
    },
    // 2. 判断是否打开了歌曲详细页面
    isShowSongDetail () {
      return this.$store.state.isShowSongDetail
    }
  },
  created () {
    this.getDebounce()
  },
  watch: {
    // 观察 打开/关闭 歌曲详细页这个行为
    isShowSongDetail () {
      if (this.isShowSongDetail) {
        // 打开了关闭滚动到页面底部触发事件
        this.$bus.$off('yEnd')
      } else if (!this.isLastPage) {
        // 添加滚动到页面底部触发事件
        this.$bus.$on('yEnd', () => {
          this.handleYEnd()
        })
      }
    }
  },
  methods: {
    // 1. 获取歌曲详情
    getSongDetail () {
      if (!this.isNextPage) return false
      this.isNextPage = false
      // this.songDetail.push(this.trackIds.)
      // console.log(result)
      new Promise((resolve) => {
        setTimeout(() => {
          // if (this.trackIds !== 0) console.log('获取到了')
          // 因为获取出来是object所以要遍历出所有的id
          this.getPartIds()
          this.partIds.forEach(item => {
            this.ids.push(item.id)
          })
          resolve()
        }, 0)
      }).then(async () => {
        const result = await this.$http.get('/song/detail', {
          params: {
            ids: this.ids.join()
          }
        })
        console.log(result)
        if (result.status !== 200 || result.data.code !== 200) {
          return this.$message.info('获取歌曲数据失败')
        }
        // 获取成功
        this.songsData.push(...result.data.songs)
        // 重置ids
        this.ids = []
        // 绑定事件总线
        if (!this.isLastPage && !this.isBindBusEvent) {
          this.isBindBusEvent = true
          this.$bus.$on('yEnd', () => {
            this.handleYEnd()
          })
          // console.log(this.$bus)
        }
      })
    },
    // 2. 获取部分歌曲ID
    getPartIds () {
      this.partIds = this.trackIds.slice((this.currentPage - 1) * 100, (!this.isLastPage ? (this.currentPage * 100) : (this.trackIds.length)))
      // return partIds
    },
    // 3. 取消active
    cancelActive () {
      this.$refs.songDataRef.forEach(item => {
        item.cancelActive()
      })
    },
    // 4. 滚到底部触发的事件
    handleYEnd () {
      // 保险地关闭事件总线的方法
      if (this.$route.path !== '/playlist/detail') {
        this.$bus.off('yEnd')
        console.log('保险地关闭事件总线')
        return false
      }
      this.isNextPage = true
      this.currentPage = this.currentPage + 1
      this.getSongDetail()
      if (this.isLastPage) {
        this.$bus.$off('yEnd')
      }
    },
    // 5. 获得防抖函数
    getDebounce () {
      this.dataLoadDebance = debounce(() => {
        this.$emit('scrollUpdate')
      })
    },
    // 6. 数据加载完毕刷新
    dataLoad () {
      this.dataLoadDebance()
    },
    // 7. 清空songsData
    clearSongsData () {
      this.isNextPage = true
      this.partIds = []
      this.currentPage = 1
      this.ids = []
      this.songsData = []
      this.isBindBusEvent = false
    }
  }
}
</script>

<style scoped lang="less">
#detail-container {
  padding-right: 10px;
  width: 100%;
}
</style>
